<!DOCTYPE html>
<html lang="en">
<head>
  <link href="../../css/functionalAreas/dronePatrol/BigData.css" rel="stylesheet" type="text/css" />
  <link href="../../css/functionalAreas/dronePatrol/index.css" rel="stylesheet" type="text/css" />
  <link href="../../css/functionalAreas/dronePatrol/index01.css" rel="stylesheet" type="text/css" />
  <script src="../../js/functionalAreas/dronePatrol/jquery.js"></script>
  <link href="../../js/functionalAreas/dronePatrol/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="../../js/functionalAreas/dronePatrol/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
  <link href="../../css/functionalAreas/dronePatrol/Security_operation.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="../../js/functionalAreas/dronePatrol/artDialog/skins/default.css" type="text/css"/>
  <script src="../../js/functionalAreas/dronePatrol/laydate.js"></script>
  <script src="../../js/functionalAreas/dronePatrol/Home_page.js"></script>
  <meta charset="UTF-8">
  <title>大数据管理平台</title>

</head>
<body >
<div class="data_bodey">
  <div style="display: flex;width: 100%;">
    <div  style="flex:20;margin-right: 295px;height: 35px">
      <ul  role="tablist" style="display:flex;justify-content: space-between">
        <li role="presentation" style="padding-top: 10px;padding-left: 55px"><a href="../../index.html" style="flex: 12;margin: 5px;color: #fff;font-size: 30px;text-decoration: none;padding-top: 10px;font-weight: bold" >云南森林火灾大数据平台</a></li>
        <li role="presentation"  style="padding-top: 20px;padding-left: 270px"><a href="../../index.html" style="flex: 1;margin: 5px;color: #fff;font-size: 15px;text-decoration: none;font-weight: bold" >首页</a></li>
        <li role="presentation" style="padding-top: 20px"><a href="../../html/functionalAreas/forestDataDisplay.html" style="flex: 1;color: #fff;font-size: 15px;text-decoration: none;font-weight: bold">各森林数据展示</a></li>
        <li role="presentation" style="padding-top: 20px"><a href="../../html/functionalAreas/forestFireForecast.html" style="flex: 1;font-size: 15px;text-decoration: none;font-weight: bold;color: #fff">林火预测</a></li>
        <li role="presentation" style="padding-top: 20px"><a href="../../html/functionalAreas/dronePatrol.html" style="flex: 3;color: #fff;font-size: 15px;text-decoration: none;font-weight: bold;color: #337ab7;">无人机巡逻</a></li>
        <li role="presentation" style="padding-top: 20px"><a href="../../html/systemManagement/index.html" style="flex: 2;color: #fff;font-size: 15px;text-decoration: none;font-weight: bold">系统管理</a></li>
      </ul>
    </div>
  </div>
  <div class="index_tabs" style="margin-top: 22px">
    <div class="inner" style="height: 107%; display: flex">

<!--      left-->
      <div class="data_left03" style="flex: 1" >
        <div class="dataAllNo01 maginS01">
          <div class="dataAllBorder01">
            <div class="dataAllBorder02" >
              <div class="data_tit3">监控画面</div>


                  <div style="display: flex;flex-wrap: wrap;flex-direction:column;justify-content:space-between">
                    <div style="text-align: center;color: #fff;font-size: 20px;flex: 2;margin-top: 20px">高清摄像机拍摄记录</div>>
                    <div style="text-align: center;flex: 30;margin-top: 20px">
                      <video autoplay="autoplay" loop="loop" class="video_around1 " title="循环监控02" controls controlsList="nodownload" muted style="clear:both;display:block;margin:auto">
                        <source class="video" title="主监控位" src="../../video/video.mp4"/>
                      </video>
                    </div>
                  </div>


                  <div style="text-align: center;color: #fff;font-size: 20px;flex: 2;margin-top: 20px">红外摄像机拍摄记录</div>
                    <div style="text-align: center;flex: 30;margin-top: 20px">
                      <video autoplay="autoplay" loop="loop" class="video_around1 " title="循环监控02" controls controlsList="nodownload" muted>
                        <source class="video" title="主监控位" src="../../video/video.mp4"/>
                      </video>
                    </div>



            </div>
          </div>
        </div>
      </div>

<!--      center-->
      <div class="data_left04" style="flex: 1;margin-left: 50px;margin-right: 50px">

        <!--style="margin-top: 6.3%"-->
        <div class="dataAllNo01">
          <div class="dataAllBorder01">
            <div class="dataAllBorder02">
              <div class="data_tit3">无人机监控勘察记录</div>
              <div style="margin-top: 5px;z-index:1;position: absolute;left:45%;top: 5%"><p style="text-align: center;font-size: 20px;color: #fff"> 无人机正在守护着大森林的安全：</p></div>
              <div class="data_chart01" id="zhanbi02" style="margin: 0;position: relative"></div>
              <div >
                <table class="table_data01">
                  <tr>
                    <td style="font-size: 15px">地区：</td><td colspan="3" class="font01" style="font-size: 15px">保山</td>
                  </tr>
                  <tr>
                    <td></td><td colspan="3" class="font01"></td>
                  </tr>
                  <tr>
                    <td style="font-size: 15px">巡逻面积：</td><td colspan="3" class="font03" style="font-size: 15px">一万平方千米</td>
                  </tr>
                  <tr>
                    <td></td><td colspan="3" class="font01"></td>
                  </tr>
                  <tr>
                    <td style="font-size: 15px">可疑情况经纬度：</td><td colspan="3" class="font05" style="font-size: 15px">东经81°04‘-81°43’，北纬30°23‘-31°12’</td>
                  </tr>
                  <tr>
                    <td></td><td colspan="3" class="font01"></td>
                  </tr>
                  <tr>
                    <td style="font-size: 15px">无人机高度：</td><td colspan="3" class="font06" style="font-size: 15px">海拔5700米</td>
                  </tr>
                  <tr>
                    <td></td><td colspan="3" class="font01"></td>
                  </tr>
                  <tr>
                    <td style="font-size: 15px">火灾蔓延方向：</td><td colspan="3" class="font06" style="font-size: 15px">西南方</td>
                  </tr>


                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

<!--      right-->
      <div class="data_left03" >
        <div class="dataAllNo01 maginS01">
          <div class="dataAllBorder01">
            <div class="dataAllBorder02">
              <div class="data_tit3">可疑情况</div>
              <div style="">
                <div>
                  <p style="text-align: center;color: #fff;font-size: 20px;padding-top: 50px">无人机拍摄照片</p>
                  <div style="padding-top: 20px;text-align: center;"><img src="../../images/functionalAreas/dronePatrolDetailInfo/1.png" alt=""></div>
                </div>


                  <div>
                    <p style="text-align: center;color: #fff;font-size: 20px;padding-top: 100px">可疑情况</p>
                    <div style="padding-top: 20px;text-align: center;"><img src="../../images/functionalAreas/dronePatrolDetailInfo/2.png" alt=""></div>
                  </div>


              </div>

            </div>
          </div>
        </div>
      </div>

    </div>


  </div>
</div>

<script src="../../js/functionalAreas/dronePatrol/echarts-all.js"></script>
<script src="../../js/functionalAreas/dronePatrol/echarts.min.js"></script>
<script src="../../js/functionalAreas/dronePatrol/index.js"></script>
<script src="../../js/functionalAreas/dronePatrol/bstable/js/bootstrap.min.js"></script>
<script src="../../js/functionalAreas/dronePatrol/bstable/js/bootstrap-table.js"></script>
<script type="text/javascript" src="../../js/functionalAreas/dronePatrol/jquery.pagination.js"></script>
<script src="../../js/functionalAreas/dronePatrol/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>

<!--<script src="js/MainMap.js"></script>-->
<script src="../../js/functionalAreas/dronePatrol/Home_page.js"></script>
<script src="../../js/functionalAreas/dronePatrol/artDialog/artDialog.js"></script>
<script src="../../js/functionalAreas/dronePatrol/artDialog/plugins/iframeTools.source.js"></script>
<script>
  var number;
  $(function() {
    if (window.screen.height <= 768) {
      number = 4;
    } else if (window.screen.height > 768 && window.screen.height <= 900) {
      number = 6
    } else if (window.screen.height > 1080) {
      number = 8
    }
  });


  //    翻页模块
  $(".tcdPageCode").createPage({
    pageCount:5,
    current:1,
    backFn:function(p){}
  });
  $(".chemistry_tcdPageCode").createPage({
    pageCount:4,
    current:1,
    backFn:function(p){}
  });
  $(".enterprise_tcdPageCode").createPage({
    pageCount:4,
    current:1,
    backFn:function(p){}
  });
  $(".car_tcdPageCode").createPage({
    pageCount:4,
    current:1,
    backFn:function(p){}
  });

  $(function () {
    $(".tit02Diva a").each(function (index) {
      $(this).on("click",function () {
        $(".data_map").eq(index).fadeIn().siblings(".data_map").stop().hide();
        $(this).prev('i').removeClass('i_crlieAction');
        $(this).siblings('a').prev('i').addClass('i_crlieAction');

      })
    });
    BootstrapTable();
    $("#fresh_tool").click(function(event){
      event.stopPropagation();
      cancel();
    })

  });
  function EventClick(){
    $(".check_increase").removeClass("check_increase_act");
    $("#over_hide1").show().siblings().hide();
    $(".check_decrease").show();
    $("#cage_cl").hide();
    $("#map_title_innerbox").hide();
    $("#cage_cl1").show();
//        $("#over_hide").show();
    $("#map_title_innerbox1").show();
    $(".addition_check_in").hide();
    $("#car_check_in").hide();
    BootstrapTable();
  }
  function cancel(e){
    $(".check_increase").removeClass("check_increase_act");
    $("#over_hide").show().siblings().hide();
    $(".check_decrease").show();
    $("#cage_cl").show();
    $("#cage_cl1").hide();
//        $("#cage_cl").show();
//        $("#over_hide1").show();
//        $("#map_title_innerbox").show();
    BootstrapTable();
  }


  function BootstrapTable() {
    $('#table').bootstrapTable({
      method: "get",
      striped: true,
      singleSelect: false,
      url: "../../json/dronePatrol/DGCar.json",
      dataType: "json",
      pagination: true, //分页
      pageSize: number,
      pageNumber: 1,
      search: false, //显示搜索框
      contentType: "application/x-www-form-urlencoded",
      queryParams: null,
      columns: [
        {
          title: '车牌号',
          field: 'carno',
          width:80,
          align: 'center',
          valign: 'middle'
        },
        {
          title: '所属企业',
          field: 'company',
          align: 'center',
          valign: 'middle'
        },

        {
          title: '运输内容',
          field: 'content',
          align: 'center'
        },

        {
          title: '行驶速度',
          field: 'speed',
          width:80,
          align: 'center'
        },
        {
          title: '车辆载重',
          field: 'load',
          width:80,
          align: 'center'
        },
        {
          title: '操作',
          field: 'load',
          align: 'center',
          formatter: function (value, row) {
            var e = '<a  href="javascript:void(0)" title="" onclick="showCarDetai()">查看详情</a> ';
            var d = '<a  href="javascript:void(0)" title="" onclick="analiysis(\'' + row.id + '\')">车辆定位</a> ';
            return e + d;
          }
        }

      ]
    });
    $('#table1').bootstrapTable({
      method: "get",
      striped: true,
      singleSelect: false,
      url: "../../json/dronePatrol/note1.json",
      dataType: "json",
      pagination: true, //分页
      pageSize: number,
      pageNumber: 1,
      search: false, //显示搜索框
      contentType: "application/x-www-form-urlencoded",
      queryParams: null,
      columns: [
        {
          title: "威胁源",
          field: 'id',
          align: 'center',
          valign: 'middle'
        },
        {
          title: '辐射距离',
          field: 'title',
          align: 'center',
          valign: 'middle'
        },
        {
          title: '威胁范围',
          field: 'type',
          align: 'center',
          valign: 'middle'
        },

        {
          title: '危害类型',
          field: 'person',
          align: 'center'
        }

      ]
    });
    $('#table2').bootstrapTable({
      method: "get",
      striped: true,
      singleSelect: false,
      url: "../../json/dronePatrol/note2.json",
      dataType: "json",
      pagination: true, //分页
      pageSize: number,
      pageNumber: 1,
      search: false, //显示搜索框
      contentType: "application/x-www-form-urlencoded",
      queryParams: null,
      columns: [
        {
          title: "威胁源",
          field: 'id',
          align: 'center',
          valign: 'middle'
        },
        {
          title: '辐射距离',
          field: 'title',
          align: 'center',
          valign: 'middle'
        },
        {
          title: '威胁范围',
          field: 'type',
          align: 'center',
          valign: 'middle'
        },

        {
          title: '危害类型',
          field: 'person',
          align: 'center'
        }

      ]
    });
  }

  function TimeControl(){
    $(".message_scroll_box").animate({marginTop:96},800,
        function(){
          $(".message_scroll_box").css({marginTop:0});    //把顶部的边界清零
          $(".message_scroll_box .message_scroll:first").before($(".message_scroll_box .message_scroll:last"));    //在第一个新闻后面插入最后一个新闻

        });
  }
  var T=setInterval(TimeControl,2300);    //开始定时
  $(".message_scroll_box").mouseenter(function(){
    clearInterval(T);    //停止定时
  })
      .mouseleave(function(){
        T=setInterval(TimeControl,2500);    //再次定时
      })

</script>
<script>
  var myChart = echarts.init(document.getElementById('zhanbi02'));

  let angle = 0;//角度，用来做简单的动画效果的
  let value = 1111;
  option = {
    title: {
      text: '{a|'+ value +'}{c|s}',
      x: 'center',
      y: 'center',
      textStyle: {
        rich:{
          a: {
            fontSize: 24,
            color: '#29EEF3'
          },

          c: {
            fontSize: 24,
            color: '#ffffff',
            // padding: [5,0]
          }
        }
      }
    },

    series: [
      // 紫色
      {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
            type: 'arc',
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
              startAngle: (0+angle) * Math.PI / 180,
              endAngle: (90+angle) * Math.PI / 180
            },
            style: {
              stroke: "#8383FA",
              fill: "transparent",
              lineWidth: 1.5
            },
            silent: true
          };
        },
        data: [0]
      },{
        name: "ring5",  //紫点
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
          let point = getCirlPoint(x0, y0, r, (90+angle))
          return {
            type: 'circle',
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4
            },
            style: {
              stroke: "#8450F9",      //绿
              fill: "#8450F9"
            },
            silent: true
          };
        },
        data: [0]
      },
      // 蓝色

      {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
            type: 'arc',
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
              startAngle: (180+angle) * Math.PI / 180,
              endAngle: (270+angle) * Math.PI / 180
            },
            style: {
              stroke: "#4386FA",
              fill: "transparent",
              lineWidth: 1.5
            },
            silent: true
          };
        },
        data: [0]
      },
      {
        name: "ring5",   // 蓝色
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
          let point = getCirlPoint(x0, y0, r, (180+angle))
          return {
            type: 'circle',
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4
            },
            style: {
              stroke: "#4386FA",      //绿
              fill: "#4386FA"
            },
            silent: true
          };
        },
        data: [0]
      },

      {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
            type: 'arc',
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
              startAngle: (270+-angle) * Math.PI / 180,
              endAngle: (40+-angle) * Math.PI / 180
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 1.5
            },
            silent: true
          };
        },
        data: [0]
      },
      // 橘色

      {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          return {
            type: 'arc',
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
              startAngle: (90+-angle) * Math.PI / 180,
              endAngle: (220+-angle) * Math.PI / 180
            },
            style: {
              stroke: "#FF8E89",
              fill: "transparent",
              lineWidth: 1.5
            },
            silent: true
          };
        },
        data: [0]
      }, {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
          let point = getCirlPoint(x0, y0, r, (90+-angle))
          return {
            type: 'circle',
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4
            },
            style: {
              stroke: "#FF8E89",//粉
              fill: "#FF8E89"
            },
            silent: true
          };
        },
        data: [0]
      }, {
        name: "ring5",  //绿点
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function(params, api) {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
          let point = getCirlPoint(x0, y0, r, (270+-angle))
          return {
            type: 'circle',
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4
            },
            style: {
              stroke: "#0CD3DB",      //绿
              fill: "#0CD3DB"
            },
            silent: true
          };
        },
        data: [0]
      }, {
        name: '吃猪肉频率',
        type: 'pie',
        radius: ['52%', '40%'],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: "center",

          }
        },
        data: [{
          value: value,
          name: "",
          itemStyle: {
            normal: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color: '#A098FC' // 0% 处的颜色
                },
                  {
                    offset: 0.3,
                    color: '#4386FA' // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: '#4FADFD' // 0% 处的颜色
                  },
                  {
                    offset: 0.8,
                    color: '#0CD3DB' // 100% 处的颜色
                  },{
                    offset: 1,
                    color: '#646CF9' // 100% 处的颜色
                  }]
              },
            }
          }
        },
          {
            value: 100-value,
            name: "",
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: "#173164"
              }
            }
          }
        ]
      },
      {
        name: '吃猪肉频率',
        type: 'pie',
        radius: ['32%', '35%'],
        silent: true,
        clockwise: true,
        startAngle: 270,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: "center",

          }
        },
        data: [{
          value: value,
          name: "",
          itemStyle: {
            normal: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color: '#00EDF3' // 0% 处的颜色
                }
                  ,{
                    offset: 1,
                    color: '#646CF9' // 100% 处的颜色
                  }]
              },
            }
          }
        },
          {
            value: 100-value,
            name: "",
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: "#173164"
              }
            }
          }
        ]
      },

    ]
  };

  //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
  function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
    let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
    return {
      x: x1,
      y: y1
    }
  }

  function draw(){
    angle = angle+3
    myChart.setOption(option, true)

  }

  setInterval(function() {
    //用setInterval做动画感觉有问题
    draw()
  }, 100);




  setInterval(function() {
    value = value+1
    option.title.text = '{a|'+ value +'}{c|s}'
    myChart.setOption(option, true)
  }, 1000);





  myChart.setOption(option);
</script>
<!--dronePatrol的index-->
<script type="text/javascript" >

  // alert(window.location.href.split('=')[1])
</script>
</body>
</html>



























